import * as React from 'react';
import { Platform, PlatformColor, View } from 'react-native';

import { Text } from '@fluentui/react-native';
import { ICON_TESTPAGE } from '@fluentui-react-native/e2e-testing';
import type { RasterImageIconProps, SvgIconProps, FontIconProps } from '@fluentui-react-native/icon';
import { Icon } from '@fluentui-react-native/icon';

import { E2ETestingIcon } from './IconLegacyE2ETest';
import { IconV1E2ETest } from './IconV1E2ETest';
import { IconV1Test } from './IconV1Test';
import { testImage, testTtf, svgProps } from '../Common/iconExamples';
import type { TestSection, PlatformStatus } from '../Test';
import { Test } from '../Test';

const Icons: React.FunctionComponent = () => {
  const fontCustomFontProps: FontIconProps = {
    fontFamily: 'Font Awesome 5 Free',
    fontSrcFile: testTtf,
    codepoint: 0xf083,
    fontSize: 32,
  };

  const fontBuiltInProps = {
    fontFamily: 'Arial',
    codepoint: 0x2663,
    fontSize: 32,
  };

  // d20 icon by Lonnie Tapscott, licensed under CC BY, modified to use "currentColor"
  // https://thenounproject.com/search/?q=d20&i=2453700
  const svgD20DataUriProps: SvgIconProps = {
    uri: '',
    viewBox: '25 10 50 50',
  };

  // This one doesn't get tinted because it doesn't use currentColor
  const svgUriProps: SvgIconProps = {
    uri: 'https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg',
    viewBox: '0 0 1000 1000',
  };

  const rasterRainbowSpectrumProps: RasterImageIconProps = { src: testImage };

  // Chess icon by Justicon, licensed under CC BY
  // https://thenounproject.com/search/?q=chess&i=2960386
  const rasterChessProps: RasterImageIconProps = { src: { uri: 'https://static.thenounproject.com/png/2960386-200.png' } };

  // These flags can be adjusted for debugging purposes
  const showFontIcons = true;
  const showSvgIcons = true;
  const showRasterIcons = true;
  const shouldShowDataUri = Platform.OS !== 'android' && Platform.OS !== ('win32' as any);

  return (
    <View>
      {showFontIcons ? (
        <View>
          <Text>Font icons</Text>
          {
            // We've seen some issues getting Font Awesome to link properly on Apple platforms in the FURN test app specifically.
            // This shouldn't be an issue in other apps, though, so keeping this icon Windows-only for now is an easy workaround.
            // When Android support comes, the platform check can be adjusted accordingly.
            Platform.OS === 'windows' ? <Icon fontSource={fontCustomFontProps} width={100} height={100} color="purple" /> : null
          }
          <Icon fontSource={fontBuiltInProps} width={100} height={100} color="#060" />
        </View>
      ) : null}
      {showSvgIcons ? (
        <View>
          <Text>SVG icons</Text>
          <Icon svgSource={svgProps} width={100} height={100} color="orange" accessibilityLabel="Wheelchair" />
          {
            // TODO: Causes TypeError: Network request failed on Android
            shouldShowDataUri ? <Icon svgSource={svgD20DataUriProps} width={100} height={100} color="#7a7" /> : null
          }
          <Icon svgSource={svgUriProps} width={100} height={100} color="red" accessibilityLabel="Just another example" />
          {Platform.OS === ('win32' as any) && (
            <Icon svgSource={svgProps} width={100} height={100} color={PlatformColor('WindowText')} accessibilityLabel="Wheelchair" />
          )}
        </View>
      ) : null}
      {showRasterIcons ? (
        <View>
          <Text>Raster icons</Text>
          <Icon rasterImageSource={rasterRainbowSpectrumProps} width={100} height={100} color="green" accessibilityLabel="Atom" />
          <Icon rasterImageSource={rasterChessProps} width={100} height={100} color="blue" accessibilityLabel="Chess pieces" />
        </View>
      ) : null}
    </View>
  );
};

const iconSections: TestSection[] = [
  ...Platform.select({
    android: [null],
    default: [
      {
        name: 'Icon',
        testID: ICON_TESTPAGE,
        component: Icons,
      },
    ],
  }),
  {
    name: 'Icon for E2E Testing',
    component: E2ETestingIcon,
  },
  {
    name: 'Default Icon',
    testID: ICON_TESTPAGE,
    component: IconV1Test,
  },
];

const e2eSections: TestSection[] = [
  {
    name: 'IconV1 for E2E Testing',
    component: IconV1E2ETest,
  },
];

export const IconTest: React.FunctionComponent = () => {
  const status: PlatformStatus = {
    win32Status: 'Production',
    uwpStatus: 'Backlog',
    iosStatus: 'Production',
    macosStatus: 'Production',
    androidStatus: 'Production',
  };

  const description = 'Icons are styled images that can be fonts, svgs, or bitmaps';

  return <Test name="Icon Test" description={description} sections={iconSections} status={status} e2eSections={e2eSections}></Test>;
};
